<template>
  <div class="home-container">
    <!-- 头部区域 -->
    <van-nav-bar title="头条项目demo" fixed />

    <!-- 导入ArticleInfo组件 -->
    <!-- :disabled="finished" 检测接口是否有数据了，如果没有就禁用下拉刷新 -->
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh" :disabled="finished">
      <van-list v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad">

          <ArticleInfo
            v-for="item in articleList"
            :key="item.art_id"
            :title="item.title"
            :author="item.aut_name"
            :cmtCount="item.comm_count"
            :pubdate="item.pubdate"
            :cover="item.cover">
          </ArticleInfo>
      </van-list>
    </van-pull-refresh>

  </div>
</template>

<script>
import { getArticleListAPI } from '@/api/articleAPI.js'

// 导入组件
import ArticleInfo from '@/components/Article/ArticleInfo.vue'
export default {
  name: 'Home',
  data() {
    return {
      articleList: '',
      // 页码值
      page: 1,
      // 每页显示多少数据
      limit: 10,

      // 是否加载下一页数据， if  loading为true，就不会反复触发loading事件
      // 每当下一页数据请求回来之后，千万要记得将loading的值改为false
      loading: true,

      // 所有数据是否加载完毕了，如果没有更多数据了，一定要把finshed改成true
      finished: false,

      // 是否在下拉刷新
      isLoading: false
    }
  },
  methods: {
    // 封装获取文章数据的方法
    async initArticleList(isRefresh) {
      const { data: result } = await getArticleListAPI(this.page, this.limit)
      if (isRefresh) {
        //  下拉刷新  新数据在前，旧数据在后
        this.articleList = [...result, ...this.articleList]
        this.isLoading = false
      } else {
        // 上拉加载更多 旧数据在前，旧数据在后
        this.articleList = [...this.articleList, ...result]
        this.loading = false
      }

      // 如果请求数据的长度为0就显示数据没有更多了，加载完毕
      if (result.length === 0) {
        this.finished = true
      }
    },
    // 只要onLoad被你调用就请求下一页数据
    onLoad() {
      this.page += 1
      this.initArticleList()
    },
    // 下拉刷新的处理函数
    onRefresh() {
      console.log('触发了下拉刷新')
      this.page += 1
      this.initArticleList(true)
    }
  },
  created() {
    this.initArticleList()
  },
  components: {
    ArticleInfo
  }
}
</script>

<style lang="less" scoped>
.home-container {
  padding: 46px 0 50px 0;
}
// .van-nav-bar {
//   background-color: #007bff;
// }
// 覆盖titile的字体颜色
// /deep/.van-nav-bar__title {
//   color: white;
// }
</style>
